<template>
  <div class="charts" ref="charts"></div>
</template>
<script>
import * as echarts from "echarts";
import { mapState } from "vuex";

export default {
  name: "barCharts",
  data() {
    return {};
  },
  mounted() {
    this.getEcharts();
  },
  methods: {
    getEcharts() {
      let lineCharts = echarts.init(this.$refs.charts);
      lineCharts.setOption({
        xAxis: {
          show: false,
          type: "category",
        },
        yAxis: {
          show: false,
        },
        series: [
          {
            type: "bar",
            data: this.countlist,
            color: "black",
            barWidth: 30,
          },
        ],
        tooltip: {},
        grid: {
          left: 0,
          top: 5,
          right: 0,
          bottom: 0,
        },
      });
    },
  },
  computed: {
    ...mapState({
      countlist: (state) => state.home.countlist,
    }),
  },
};
</script>
<style scoped>
.charts {
  width: 100%;
  height: 100%;
}
</style>
